<template>
  <div class="profile-info-page">
    <TopHeader />
    <BottomNavigation />
    <!-- 返回按钮 -->
    <div class="back-button-container">
      <el-button 
        type="default" 
        @click="goBack" 
        class="back-button"
        :icon="ArrowLeft"
        text
      >
        返回
      </el-button>
    </div>
    <div class="content-container">
      <el-card>
        <div v-if="editUser">
          <el-form :model="editUser" label-width="90px" style="margin-top: 10px;">
            <el-form-item label="用户名">
              <el-input v-model="editUser.userName" />
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="editUser.realName" readonly />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="editUser.telephone" />
            </el-form-item>
            <!-- 可按需添加更多字段 -->
          </el-form>
          <el-button type="primary" style="margin-top: 18px;" @click="saveProfile">保存</el-button>
          <el-button type="warning" style="margin-top: 18px; margin-left: 12px;" @click="goChangePassword">修改密码</el-button>
          <el-button type="danger" style="margin-top: 18px; margin-left: 12px;" @click="logout">退出登录</el-button>
        </div>
        <div v-else>
          <el-empty description="未登录">
            <el-button type="primary" @click="goLogin">去登录</el-button>
          </el-empty>
        </div>
      </el-card>
    </div>
    <div v-if="editUser" class="qrcode-section">
      <div class="qrcode-title">我的身份二维码</div>
      <QrcodeVue :value="qrValue" :size="140" :level="'M'" />
      <div class="qrcode-desc">医院扫码即可识别您的全部信息</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import QrcodeVue from 'qrcode.vue'
import axios from 'axios'
import TopHeader from '@/components/TopHeader.vue'
import BottomNavigation from '@/components/BottomNavigation.vue'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()

const editUser = ref(userStore.userInfo ? { ...userStore.userInfo } : null)

watch(() => userStore.userInfo, (val) => {
  if (val) editUser.value = { ...val }
})

const qrValue = computed(() => editUser.value ? JSON.stringify(editUser.value) : '')

const goBack = () => {
  router.push('/yonghu/my')
}

const goLogin = () => {
  router.push('/login')
}
const goChangePassword = () => {
  router.push('/yonghu/profile')
}
const logout = () => {
  userStore.logout && userStore.logout();
  if (userStore.userInfo) userStore.userInfo = null;
  router.push('/login');
}

const saveProfile = async () => {
  try {
    // 假设有/user/update接口，POST方式
    await axios.post('http://localhost:8080/hospital5_war/user/updateUserInfo', editUser.value)
    userStore.setUserInfo(editUser.value)
    ElMessage.success('保存成功！')
  } catch (e) {
    ElMessage.error('保存失败')
  }
}
</script>

<style scoped>
.profile-info-page {
  padding: 15px;
  padding-top: 70px;
  padding-bottom: 70px;
  background: #f5f7fa;
  min-height: 100vh;
}

.back-button-container {
  margin-bottom: 20px;
  padding: 0 4px;
}

.back-button {
  font-size: 16px;
  color: #606266;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.back-button:hover {
  color: #165DFF;
  background-color: rgba(22, 93, 255, 0.1);
}

.content-container {
  max-width: 400px;
  margin: 0 auto;
}

.qrcode-section {
  margin: 32px auto 0 auto;
  text-align: center;
}
.qrcode-title {
  font-size: 1.1rem;
  color: #165DFF;
  font-weight: 700;
  margin-bottom: 10px;
}
.qrcode-desc {
  color: #888;
  font-size: 0.95rem;
  margin-top: 8px;
}
</style> 